<template>
	<view class="px-1 py-1">
		<wd-message-box />
		<wd-toast />
		<!-- <wd-search v-model="value" @search="search" hide-cancel placeholder-left placeholder="请输入关键字">
			<template #prefix>
				<wd-popover mode="menu" :content="menu" @menuclick="changeSearchType">
					<view class="search-type">
						<text>{{ searchType }}</text>
						<wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
					</view>
				</wd-popover>
			</template>
		</wd-search> -->

		<wd-form ref="queryFormRef" labelWidth="120" :model="queryParams">
			<wd-cell-group border>
				<wd-card type="rectangle">
					<view>
						<template>
							<wd-select-picker label="是否已读" prop="readStatus" v-model="queryParams.readStatus"
								:columns="getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" placeholder="请选择状态"
								clearable value-key="value" label-key="label" type="radio"
								:show-confirm="false"></wd-select-picker>
							<view class=" flex mt-4 ">

								<wd-button type="success" @click="handleQuery" >搜索</wd-button>
								<!-- <wd-button type="error" @click="resetQuery" class="mx-4">重置</wd-button> -->
								<wd-button @click="handleUpdateAll" class="mx-4"> 全部已读</wd-button>

							</view>
						</template>
					</view>
				</wd-card>
			</wd-cell-group>

		</wd-form>

		<wd-table :data="list" :height="600" :border="false">
			<wd-table-col prop="templateNickname" label="发送人"></wd-table-col>
			<wd-table-col prop="createTime" label="发送时间" width="150">
				<template #value="{ row }">
					{{formatDate(row.createTime)}}
				</template>
			</wd-table-col>
			<wd-table-col prop="templateContent" label="消息内容" width="260"></wd-table-col>
			<wd-table-col prop="templateType" label="类型" align="center">
				<template #value="{ row }">
					<wd-tag custom-class="space"
						:type="getDictColor(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, row.templateType)">
						{{ getDictLabel(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, row.templateType) }}
					</wd-tag>
				</template>
			</wd-table-col>
			<wd-table-col prop="readStatus" label="是否已读" align="center">
				<template #value="{ row }">
					<wd-tag custom-class="space" type="primary">
						{{ row.readStatus === true || row.readStatus === 'true' ? '是' : '否' }}
					</wd-tag>
				</template>
			</wd-table-col>
			<wd-table-col prop="readTime" label="阅读时间" width="150">
				<template #value="{ row }">
					{{formatDate(row.readTime)}}
				</template>
			</wd-table-col>
			<wd-table-col prop="grade" label="操作" width="100" fixed align="center">
				<template #value="{ row }">
					<span class="px-1">
						<wd-button :type="row.readStatus ? 'primary' : 'warning'" @click="openDetail(row)" size="small"
							plain hairline>
							{{row.readStatus ? '详情' : '阅读' }}
						</wd-button>
					</span>
				</template>
			</wd-table-col>
		</wd-table>

		<!-- 分页组件 -->
		<Pagination :total="total" :pageNo="queryParams.pageNo" :pageSize="queryParams.pageSize"
			@update:pageNo="changePage" />
		<view class="mx-12 my-8 ">
			<up-button text="新增" color="#5ac725" shape="circle" @click="handleAddOrEdit()"></up-button>
		</view>

		<!-- 表单弹窗：详情 -->
		<MyNotifyMessageDetail ref="detailRef" />
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import * as NotifyMessageApi from '@/api/system/notify/message'
	import MyNotifyMessageDetail from './MyNotifyMessageDetail.vue'
	import { DICT_TYPE, getDictLabel, getDictColor, getBoolDictOptions } from '@/utils/dict'
	import { formatPast2, formatDate } from '@/utils/formatTime'
	import Pagination from '@/components/pagination/index.vue'
	import { useMessage, useToast } from 'wot-design-uni'

	const message = useMessage()
	const toast = useToast()

	// 响应式数据
	const list = ref<NotifyMessageApi.NotifyMessageVO[]>([])
	const queryParams = ref<any>({
		pageNo: 1,
		pageSize: 10,
		readStatus: undefined,
		createTime: []
	})
	const total = ref(0)
	const loading = ref(false)

	const searchType = ref<string>('发文标题')
	const value = ref<string>('')
	const menu = ref<any[]>([
		{
			content: '发文标题',
			prop: 'title'
		},
		// {
		// 	content: '发文类型',
		// 	prop: 'type'
		// }
	])
	function changeSearchType({ item } : { item : any }) {
		searchType.value = item?.content
	}
	const search = () => {
		// 找到选中的搜索字段
		const selectedMenu = menu.value.find(item => item.content === searchType.value);
		if (selectedMenu) {
			// 清空之前的搜索条件
			queryParams.value.contractName = undefined;
			queryParams.value.contractNumber = undefined;
			// 根据选中的搜索类型设置搜索值
			queryParams.value[selectedMenu.prop] = value.value;
			// 重新获取数据
			fetchList();
		}
	};

	// 切换分页
	const changePage = (newPage : any) => {
		queryParams.value.pageNo = newPage
		fetchList()
	}
	/** 搜索按钮操作 */
	const handleQuery = () => {
		console.log('搜索')
		queryParams.value.pageNo = 1
		fetchList()
	}

	/** 重置按钮操作 */
	// const resetQuery = () => {
	// 	queryFormRef.value.resetFields()
	// 	tableRef.value.clearSelection()
	// 	handleQuery()
	// }
	// 获取合同列表
	const fetchList = async () => {
		loading.value = true
		try {
			const response = await NotifyMessageApi.getMyNotifyMessagePage(queryParams.value)
			list.value = response.list
			total.value = response.total
			// for (let item of list.value) {
			// 	item.status = item.isApproved === false ? 0 : item.status;
			// }
		} catch (error) {
			console.error(error)
		} finally {
			loading.value = false
		}
	}
	/** 详情操作 */
	const detailRef = ref()
	const openDetail = (data : NotifyMessageApi.NotifyMessageVO) => {
		console.log('data.readStatus',data.readStatus);
		if (!data.readStatus) {
			handleReadOne(data.id)
		}
		detailRef.value.open(data)
	}

	/** 标记一条站内信已读 */
	const handleReadOne = async (id) => {
		await NotifyMessageApi.updateNotifyMessageRead(id)
		await fetchList()
	}
	/** 标记全部站内信已读 **/
	const handleUpdateAll = async () => {
		await NotifyMessageApi.updateAllNotifyMessageRead()
		toast.success('全部已读成功！')
		// tableRef.value.clearSelection()
		await fetchList()
	}

	/** 标记一些站内信已读 **/
	// const handleUpdateList = async () => {
	// 	if (selectedIds.value.length === 0) {
	// 		return
	// 	}
	// 	await NotifyMessageApi.updateNotifyMessageRead(selectedIds.value)
	// 	toast.success('批量已读成功！')
	// 	// tableRef.value.clearSelection()
	// 	await fetchList()
	// }
	// 生命周期
	onMounted(() => {
		fetchList()
	})
</script>

<style scoped lang="scss">
	.container {
		padding: 20px 10px;
	}

	.search-type {
		position: relative;
		height: 30px;
		line-height: 30px;
		padding: 0 8px 0 16px;
	}

	.search-type::after {
		position: absolute;
		content: '';
		width: 1px;
		right: 0;
		top: 5px;
		bottom: 5px;
		background: rgba(0, 0, 0, 0.25);
	}

	.search-type {
		:deep(.icon-arrow) {
			display: inline-block;
			font-size: 20px;
			vertical-align: middle;
		}
	}
</style>